<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
    isLarge: Boolean,
  },
});
</script>

<template>
  <view class="interview-item">
    <template v-if="isLarge">
      <view class="interview-item-cover">
        <image
          class="interview-item-img"
          :src="info.pic_url"
          mode="aspectFill"
        />

        <view class="interview-item-guider">
          <image
            class="interview-item-guider2"
            src="/static/community-interview-mike.png"
          />
          {{ info.guider_name }}
        </view>
      </view>
      <view class="interview-item-title">{{ info.title }}</view>
    </template>

    <template v-else>
      <view class="interview-item-cover2">
        <image
          class="interview-item-img2"
          :src="info.pic_url"
          mode="aspectFill"
        />
        <view class="interview-item-guider3">{{ info.guider_name }}</view>
      </view>

      <view class="interview-item-title2">{{ info.title }}</view>
    </template>
  </view>
</template>

<style lang="scss">
.interview-item {
  padding-bottom: 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .interview-item-cover {
    position: relative;
    padding: 10rpx;
    margin-bottom: 10rpx;
  }

  .interview-item-img,
  .interview-item-img2 {
    display: block;
    width: 100%;
    height: 334rpx;
    border-radius: 20rpx;
  }

  .interview-item-guider {
    position: absolute;
    left: 10rpx;
    bottom: 40rpx;
    display: flex;
    align-items: center;
    height: 44rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #333333;
    font-weight: bold;
    border-radius: 0 22rpx 22rpx 0;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .interview-item-guider2 {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }

  .interview-item-title {
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .interview-item-cover2 {
    position: relative;
    margin-bottom: 20rpx;
  }

  .interview-item-img2 {
    height: 252rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .interview-item-guider3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16rpx 20rpx 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 34rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  }

  .interview-item-title2 {
    height: 84rpx;
    padding: 0 20rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>